<template>
    <div class="content">
        <h1 style="font-size: 2rem;text-align: center;color: #000;">现场用工统计表</h1>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-button type="primary" :icon="CirclePlus" @click="onEdit(-1)">添加</el-button>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-date-picker style="width: 200px;" @change="onChangeDate" v-model="date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-col>
           
        </el-row>
        <el-row :gutter="20" class="mt20">
            <el-col :span="18">
                工程名称：{{ project.title }}
            </el-col>
            <el-col :span="6" class="text-right">
                <el-text>日期：{{date}} 　　星期{{ week }}</el-text>
            </el-col>
        </el-row>
        <el-table class="mt20" :data="tableData" border v-loading="form.loading" style="width: 100%;font-size: 16px;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
            <el-table-column prop="leader" label="班组长" align="center" />
            <el-table-column prop="area" label="施工区域" align="center" />
            <el-table-column prop="numbers" label="施工人数" align="center" />
            <el-table-column prop="workload" label="完成工作量" align="center" />
            <el-table-column label="施工过程中照片" width="140">
                <template #default="scope">
                    <div class="text-center"><el-link type="primary" @click="onShowFile(scope.row.files)">查看</el-link></div>
                </template>
            </el-table-column>
            <el-table-column prop="total" label="各累计人数" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-link type="primary" @click="onEdit(scope.$index)">编辑</el-link>
                    <el-popconfirm title="确定要删除么?" @confirm="onDelete(scope.row.id)">
                        <template #reference>
                            <el-link type="danger" >删除</el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="isEdit" title="操作" width="800" >
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="auto" status-icon size="large">
            <el-form-item label="日期" prop="date">
                <el-text>{{ date }}</el-text>
                <!-- <el-date-picker style="width: 100%" v-model="date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" /> -->
            </el-form-item>
            <el-form-item label="班组长" prop="leader">
                <el-input v-model="ruleForm.leader" />
            </el-form-item>
            <el-form-item label="施工区域" prop="area">
                <el-input v-model="ruleForm.area" />
            </el-form-item>
            <el-form-item label="施工人数" prop="numbers">
                <el-input v-model="ruleForm.numbers" />
            </el-form-item>
            <el-form-item label="完成工作量" prop="workload">
                <el-input v-model="ruleForm.workload" />
            </el-form-item>
            <el-form-item label="各累计人数" prop="total">
                <el-input v-model="ruleForm.total" />
            </el-form-item>
            <el-form-item label="施工过程中照片" prop="files">
                <el-button type="primary" @click="onUpload" >上传</el-button>
                <el-button type="primary" @click="onShowFile(ruleForm.files)" >查看</el-button>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input v-model="ruleForm.remarks" />
            </el-form-item>
        </el-form>
        <el-divider />
        <div class="text-center">
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
            <el-button type="info" @click="isEdit = false" > 取消 </el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="uploadMoreImg" :data="uploadData" :fileList="fileList" @saveUpload="saveUpload" />
    </el-dialog>

    <el-dialog v-model="isShowFile" title="文件" width="80%" @close="onCloseFile">
        <component :is="showFileArr" :data="files"/>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { CirclePlus} from '@element-plus/icons-vue'
import { ElMessage, FormInstance } from 'element-plus'
import http from '../../../util/request';
import dayjs from 'dayjs'
import uploadMoreImg from '@/components/uploadMoreImg.vue'
import showFileArr from '@/components/showFileArr.vue'
const indexMethod = (index: number) => {
  return index+= 1
}
let project:any = sessionStorage.getItem('project')
project = JSON.parse(project)

const showUpload = ref<boolean>(false)
let uploadData:any = ref({prefix:'scene/'})
let fileList:any = ref([]);
const files = ref<string[]>([])
const isShowFile = ref<boolean>(false)

const week = ref<string>('')
const date = ref<any>()
const isEdit = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const form = ref<any>({search:'',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
interface info {
    id: number
    date: string
    leader:string
    area:string
    numbers:number
    workload:string
    total:number
    remarks: string
    files:string
}

const ruleForm = ref<info>({
    id:0,
    date: '',
    leader:'/',
    area:'/',
    numbers:0,
    workload:'/',
    total:0,
    remarks: '/',
    files:''
})

const tableData = ref<info[]>([])

const onGetData = () => {
    
    form.value.loading = true
    form.value.date = date.value
    http.post('/scene',form.value).then((response:any)=>{
        form.value.loading = false
        tableData.value = response.data.data
    })
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.value.date = date.value
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/scene',ruleForm.value)
            }else{
                request = http.put('/scene',ruleForm.value)
            }
            request.then((response:any)=>{
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return
                }
                ElMessage.success(response.data.msg);
                onGetData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onEdit = (index:number) => {
    if(index >= 0){
        ruleForm.value = tableData.value[index]
    }
    isEdit.value = true
}

const onChangeDate = (data:string) => {
    date.value = data
    onGetData()
}

const onDelete = (id: number) => {
    http.delete('/scene/'+id).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        onGetData();
    })
}

const getWeek = () => {
    const specificDate = new Date(); // 注意：月份是从0开始的（0=一月，5=六月）
    const dayOfWeek = specificDate.getDay();
    const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
    week.value = weekdays[dayOfWeek]
}

onMounted(()=>{
    date.value = dayjs().format('YYYY-MM-DD')
    getWeek()
    onGetData()
})

const onUpload = () => {
    fileList.value = []
    uploadData.value.file = ruleForm.value.files
    if(ruleForm.value.files){
        let f:any = ruleForm.value.files.split(',')
        f.forEach((e:any) => {
            fileList.value.push({name:e,url:e})
        });
    }
    
    showUpload.value = true
}

const saveUpload = (data:string[]) => {
    ruleForm.value.files = data.join(',');
    showUpload.value = false
}

const onCloseFile = () => {
    files.value = []
}

const onShowFile = (file:string) => {
    if(files){
        files.value = file.split(',')
    }
    isShowFile.value = true
}
</script>

<style scoped>

</style>